<template>
  <div class="tarbar_container" v-if="isTabShow">
    <van-tabbar v-model="stateActive" route>
      <van-tabbar-item
        :badge="item.badge === 0 ?'':item.badge "
        v-for="(item, index) in tabbar"
        :key="index"
        :to="item.router"
        @click="changeActive(index)"
      >
        <span> {{ item.text }} </span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "CommonTarBar",
  props: {},
  data() {
    return {
      isShow: true,
      active: 0,
      tabbar: [
        {
          text: "首页",
          icon: {
            active: require("../../static/tab_icons/home-active.png"),
            inactive: require("../../static/tab_icons/home.png"),
          },
          router: "/home",
          badge: "",
        },
        {
          text: "分类",
          icon: {
            active: require("../../static/tab_icons/cate-active.png"),
            inactive: require("../../static/tab_icons/cate.png"),
          },
          router: "/cate",
          badge: "",
        },
        {
          text: "购物车",
          icon: {
            active: require("../../static/tab_icons/cart-active.png"),
            inactive: require("../../static/tab_icons/cart.png"),
          },
          router: "/cart",
          badge: this.total,
        },
        {
          text: "我的",
          icon: {
            active: require("../../static/tab_icons/my-active.png"),
            inactive: require("../../static/tab_icons/my.png"),
          },
          router: "/userInfo",
          badge: "",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      isTabShow: (state) => state.isTabShow,
    }),
    ...mapGetters({
      total: "total",
    }),
    stateActive: {
      get() {
        return this.$store.state.tabbarActive;
      },
      set(val) {
        // console.log(val);
        this.$store.state.tabbarActive = val;
      },
    },
  },
  methods: {
    firstCreate(){
      this.tabbar[2].badge = this.total
      
    },
    changeActive(index) {
      this.$store.commit("changeTabbarActive", index);
    },
  },
  updated(){
    this.tabbar[2].badge = this.total
  },
  created(){
    this.firstCreate()
  }
};
</script>

<style lang="less" scoped>
</style>